<template>
  <draggable
    class="drawing-board"
    :list="drawingList"
    group="componentsGroup"
    :animation="300"
    tag="el-row"
    item-key="id"
    :component-data="componentData"
  >
    <template #item="{ element }">
      <DraggableItem
        :key="element._config_.renderKey"
        :drawing-list="drawingList"
        :index="index"
        :active-id="activeId"
        :form-conf="formConf"
        :active-data="element"
      />
    </template>
  </draggable>
</template>
<script setup lang="ts" name="DraggablePanel">
import { computed, defineAsyncComponent } from "vue";
import draggable from "vuedraggable";
const DraggableItem = defineAsyncComponent(() => import("./DraggableItem.vue"));
const props = defineProps({
  activeData: {
    type: Object,
    default: () => {
      {
      }
    }
  },
  index: Number,
  drawingList: {
    type: Array,
    default: () => []
  },
  activeId: Number,
  formConf: {
    type: Object,
    default: null
  },
  gutter: Number
});
const componentData = computed(() => {
  return {
    gutter: props.gutter ?? 5,
    justify: "start",
    style: { "margin-left": 0, /*'min-height': '50px',*/ width: "100%", alignContent: "start", height: "100%" }
  };
});
</script>
<style lang="scss">
@import "../styles/index";
@import "../styles/home";
</style>
